<template>
  <div>
    <Form ref="accountForm" :label-width="120" >
      <FormItem label="银行账户" prop="account" class="margin-bottom-3">
        <table class="gridtable" width="98%">
          <tr v-for="(item,index) in accountData" :key="index">
            <td>{{ item.bank_name }}<br/>{{ item.bank_account }}</td>
            <td >
              <span v-show="item.is_active == 1" style="color: green;text-align: center">在用</span>
              <span v-show="item.is_active == 0" style="color: red;text-align: center">不可用</span>
            </td>
            <td style="text-align: center">
              <Button type="text" size="small" @click="editAccount(index)">编辑</Button>
              <Button type="text" size="small" @click="deleteAccount(index)">
                <span v-show="item.is_active == 1" style="color: red;text-align: center">删除</span>
                <span v-show="item.is_active == 0" style="color: green;text-align: center">恢复</span>
              </Button>
            </td>
          </tr>
        </table>
        <Button
          icon="ios-download-outline"
          type="primary" size="small"
          @click="addAccount">
          新增账户
        </Button>
      </FormItem>
    </Form>
    <Modal v-model="addAccountVisiable" :title="accountTitle"  @on-ok="submitAccount" :styles="{top: '350px'}">
      <p>开户银行 <Input style="width: 320px" v-model="currentAccount.bank_name" /></p>
      <p>银行账户 <Input style="width: 320px" v-model="currentAccount.bank_account" /></p>
    </Modal>
  </div>
</template>
<script>
import { getBankAccount, insertBankAccount, updateBankAccount } from '@/api/company';
export default {
  name: 'bank-account',
  props: {
    accountData: {
      type: Array
    },
    company: {
      type: Object
    }
  },
  data() {
    return {
      addAccountVisiable: false,
      accountTitle: '',
      currentAccount: {},
      addOrEdit: 0,
      data: {}
    }
  },
  methods: {
    getAccount() {
      getBankAccount(this.company).then(res => {
        if (res.code === 0) {
          this.accountData = res.data;
        }
      })
    },
    deleteAccount(index) {
      let params = {};
      params.id = this.accountData[index].id,
      params.is_active = this.accountData[index].is_active === 1 ? 0 : 1;
      updateBankAccount(params).then(res => {
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.getAccount();
        }
      })
    },
    editAccount(index) {
      this.currentAccount.bank_name = this.accountData[index].bank_name;
      this.currentAccount.bank_account = this.accountData[index].bank_account;
      this.currentAccount.id = this.accountData[index].id;
      this.accountTitle = '编辑银行账户信息';
      this.addOrEdit = 2;
      console.log('this.currentAccount:', this.currentAccount)
      this.addAccountVisiable = true;
    },
    addAccount() {
      this.accountTitle = '添加银行账户信息';
      this.currentAccount.bank_account = '';
      this.currentAccount.bank_name = '';
      delete this.currentAccount.id;
      this.addOrEdit = 1;
      this.addAccountVisiable = true;
    },
    submitAccount() {
      this.currentAccount.company_type = this.company.company_type;
      this.currentAccount.company_id = this.company.company_id;
      console.log('this.currentAccount:', this.currentAccount)
      if (this.currentAccount.bank_name.length <= 0 || this.currentAccount.bank_account.length <= 0) {
        return;
      }
      switch (this.addOrEdit) {
        case 1:     // 新增
          insertBankAccount(this.currentAccount).then(res => {
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.getAccount();
            }
          })
          break;
        case 2:   // 编辑
          updateBankAccount(this.currentAccount).then(res => {
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.getAccount();
            }
          })
          break;
      }
    },
  }
}
</script>
<style lang="less" scoped>
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #777777;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>